…ice viz

Drop the phone-mockup container (border, status bar, header). The
animated orb is now the full-screen hero centered on a dark background.

Layout: orb-scene (top) → scrollable message list → glass input row (bottom).
Max-width 680 px, responsive padding via clamp().

Orb animations:
- Idle: two independent CSS animations on different elements — orbFloat
  (11 s, translateY) on the wrapper and orbBreath (7 s, scale) on the
  sphere. Non-harmonic periods create 77 s of apparent randomness.
- Thinking (text mode): orb brightens/glows like ChatGPT/Gemini while
  API call is in progress; swirl doubles in speed.
- Speaking (voice mode): Web Audio API (AnalyserNode, FFT 64) reads
  real microphone frequency data at 60 fps. Per-frame: overall RMS
  energy drives orb scale (1.0–1.18) and 8 frequency bands drive
  individual bar heights (4–38 px). CSS fallback simulation runs when
  mic is not active (data-live attribute gates which path is used).
  Three expanding rings provide secondary visual rhythm.

Mic button toggles voice mode (click to start / click to stop).
Graceful denial: catches getUserMedia rejection, shows status message.

https://claude.ai/code/session_01THtMvNNx21QhXYi6PBRFBz